import React from 'react'

/* 
  评论列表案例

  comments: [
    { id: 1, name: 'jack', content: '沙发！！！' },
    { id: 2, name: 'rose', content: '板凳~' },
    { id: 3, name: 'tom', content: '楼主好人' }
  ]
*/

import './index.css'
import classNames from 'classnames'
export default class extends React.Component {
  state = {
    comments: [
      { id: 1, name: 'jack', content: '沙发！！！' },
      { id: 2, name: 'rose', content: '板凳~' },
      { id: 3, name: 'tom', content: '楼主好人' }
    ],
    // 评论人
    userName: '',
    // 评论内容：
    userContent: ''
  }

  renderList = () => {
    const { comments } = this.state
    if (comments.length === 0) {
      return <div className="no-comment">暂无评论，快去评论吧~</div>
    }
    return (
      <ul>
        {comments.map((item) => (
          <li key={item.id}>
            <h3>评论人：{item.name}</h3>
            {/* <p className={`contentText ${comments.length > 1 ? 'active' : ''}`}> */}
            <p
              className={classNames('contentText', {
                active: comments.length > 1
              })}>
              评论内容：{item.content}
              <span className="del" onClick={() => this.delComment(item.id)}>
                删除
              </span>
            </p>
          </li>
        ))}
      </ul>
    )
  }

  handleForm = (e) => {
    console.log(e.target.value)
    const { name, value } = e.target
    // 因为页面的值被react控制
    // 不使用this.setState更新数据，页面就不会刷新
    // 这玩意他没有双向绑定的功能，需要手动更新一下
    this.setState({
      [name]: value
    })
  }

  addComment = () => {
    const { comments, userName, userContent } = this.state
    if (userName.trim() === '' || userContent.trim() === '') {
      alert('请输入评论内容和评论人')
      return
    }
    // 给数组添加新值的方式
    // const newComments = [
    //   {
    //     id: Math.random(),
    //     name: userName,
    //     content: userContent
    //   },
    //   ...comments
    // ]
    // 之前常用的方式
    let obj = {
      id: Math.random(),
      name: userName,
      content: userContent
    }
    // 注意这个方法的返回值不是返回新数组，返回的是新数组的长度
    comments.unshift(obj)
    const newComments = comments
    this.setState({
      comments: newComments,
      userContent: '',
      userName: ''
    })
  }

  delComment = (id) => {
    console.log(id)
    const { comments } = this.state
    let newComments = comments.filter((item) => {
      return item.id !== id
    })
    this.setState({
      comments: newComments
    })
  }
  render() {
    const { userName, userContent } = this.state
    return (
      <div className="app">
        <div>
          <input
            value={userName}
            name="userName"
            onChange={this.handleForm}
            className="user"
            type="text"
            placeholder="请输入评论人"
          />
          <br />
          <textarea
            className="content"
            cols="30"
            rows="10"
            value={userContent}
            name="userContent"
            onChange={this.handleForm}
            placeholder="请输入评论内容"
          />
          <br />
          <button onClick={this.addComment}>发表评论</button>
        </div>
        {this.renderList()}
      </div>
    )
  }
}
